<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>活动4.2</title></title>
</head>
<body>
    <div class="container">
        <center>
            <h3>注册</h3>
        </center>
        <form action="" class="needs-validation" novalidate>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" placeholder="姓名" required>
                    <div class="valid-feedback">通过</div>
                    <div class="invalid-feedback">请填写姓名</div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">邮箱</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" placeholder="邮箱" required>
                    <div class="valid-feedback">通过</div>
                    <div class="invalid-feedback">请填写邮箱</div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">手机号码</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" placeholder="手机号码" required>
                    <div class="valid-feedback">通过</div>
                    <div class="invalid-feedback">请填写手机号码</div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">生日</label>
                <div class="col-sm-10">
                    <input type="date" class="form-control">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-10 offset-sm-2">
                    <label>
                        <input type="checkbox" class="mr-1" > 我同意 
                        <a href="#">条款和条件</a>
                        <div class="valid-feedback">通过</div>
                        <div class="invalid-feedback">请同意条款和条件来完成注册</div>
                    </label>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-10 offset-sm-2">
                    <input type="submit" class="btn btn-primary" value="注册">
                    <input type="reset" class="btn btn-secondary" value="重置">
                </div>
            </div>
        </form>
    </div>
</body>
<script>
    //通过类名获取到页面内所有的需要校验的表单
    // 监听这些表单的提交事件，如果表单要提交，就添加.was-validated到表单进行校验
(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>
</html>